<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Mass-Spring System</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physics-diagram" width="700" height="450"></canvas>
<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Coordinates and dimensions
    const y_surface = 250;
    const ball_radius = 30;
    const y_center = y_surface - ball_radius; // Y-coordinate for spring and ball center

    const x_wall = 100;
    const x_A = 550;
    const x_O = 420;
    const x_B = 290;

    // Draw horizontal surface
    ctx.beginPath();
    ctx.moveTo(x_wall - 50, y_surface);
    ctx.lineTo(x_A + 100, y_surface);
    ctx.stroke();

    // Draw wall
    ctx.beginPath();
    ctx.moveTo(x_wall, y_center - 80);
    ctx.lineTo(x_wall, y_surface);
    ctx.stroke();
    // Wall hatches
    ctx.lineWidth = 1.5;
    for (let y = y_center - 75; y < y_surface; y += 12) {
        ctx.beginPath();
        ctx.moveTo(x_wall, y);
        ctx.lineTo(x_wall - 12, y + 12);
        ctx.stroke();
    }
    ctx.lineWidth = 2;

    // Draw spring
    const x_spring_start_wall = x_wall;
    const x_spring_end_ball = x_A - ball_radius;
    const x_coil_start = 170;
    const x_coil_end = 260;
    const num_coils = 6;

    // Left straight part of the spring
    ctx.beginPath();
    ctx.moveTo(x_spring_start_wall, y_center);
    ctx.lineTo(x_coil_start, y_center);
    ctx.stroke();

    // Coiled part of the spring (series of semicircles)
    const coil_length = x_coil_end - x_coil_start;
    const coil_width = coil_length / num_coils;
    const coil_radius = coil_width / 2;
    ctx.beginPath();
    let currentX = x_coil_start;
    for (let i = 0; i < num_coils; i++) {
        ctx.arc(currentX + coil_radius, y_center, coil_radius, Math.PI, 0);
        currentX += coil_width;
    }
    ctx.stroke();

    // Right straight part of the spring
    ctx.beginPath();
    ctx.moveTo(x_coil_end, y_center);
    ctx.lineTo(x_spring_end_ball, y_center);
    ctx.stroke();

    // Draw ball
    ctx.beginPath();
    ctx.arc(x_A, y_center, ball_radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw labels for physical quantities
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('k', x_coil_start - 30, y_center - 10);
    ctx.fillText('m', x_A, y_center - ball_radius - 20);
    ctx.fillText('μ', x_A + ball_radius + 25, y_center);

    // Draw labels for points on the surface
    ctx.font = '24px Times New Roman';
    const y_point_labels = y_surface + 25;
    ctx.fillText('A', x_A, y_point_labels);
    ctx.fillText('O', x_O, y_point_labels);
    ctx.fillText('B', x_B, y_point_labels);

    // Helper function to draw distance markers
    function drawDistanceMarker(x1, x2, y, label) {
        ctx.lineWidth = 1.5;
        // Vertical ticks
        ctx.beginPath();
        ctx.moveTo(x1, y_surface);
        ctx.lineTo(x1, y);
        ctx.moveTo(x2, y_surface);
        ctx.lineTo(x2, y);
        ctx.stroke();

        // Horizontal line with arrows
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        // Arrowhead at left end (pointing left)
        ctx.moveTo(x1, y);
        ctx.lineTo(x1 + 8, y - 5);
        ctx.moveTo(x1, y);
        ctx.lineTo(x1 + 8, y + 5);
        // Arrowhead at right end (pointing right)
        ctx.moveTo(x2, y);
        ctx.lineTo(x2 - 8, y - 5);
        ctx.moveTo(x2, y);
        ctx.lineTo(x2 - 8, y + 5);
        ctx.stroke();

        // Label
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText(label, (x1 + x2) / 2, y);
        ctx.lineWidth = 2; // Reset line width
    }

    // Draw distance markers for l0 and l1
    const y_marker_line = y_surface + 60;
    drawDistanceMarker(x_O, x_A, y_marker_line, 'l₀');
    drawDistanceMarker(x_B, x_O, y_marker_line, 'l₁');

    // Caption
    ctx.font = '24px KaiTi'; // Use a font that supports Chinese characters
    ctx.fillText('力图 3.2.1', canvas.width / 2, y_marker_line + 60);

</script>
</body>
</html>